<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { couponsReceiveDetails } from '@/api/Marketing/coupon.js'

const props = defineProps({
    uuid:{
        default:"",
        type:[String,Number]
    }
})

const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([

])

const btnLefts = ref([
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "couponsName",
      label: "优惠券名称",
      width:200
    },
    {
      prop: "discountsAmount",
      label: "优惠金额",
      width:100
    },
    {
      prop: "applyTime",
      label: "使用时间",
      width:320,
      format:(value,row)=>{
        return `${row.startTime} ~ ${row.endTime}`
      }
    },
    {
      prop: "content",
      label: "优惠内容",
      format:(value,row)=>{
        return `满${ row.thresholdAmount }减${ row.discountsAmount }`
      }
    },
    {
        type: 'slot',
        label: '状态',
        prop: 'status',
        width: 140,
        needHeader: true,
        slotHeaderName: 'statusHeader',
        slotName: 'status'
    },
    {
      prop: "ruels",
      label: "使用规则",
      width:250,
      format:(value,row)=>{
        return `1.优惠内容：满${ row.thresholdAmount?row.thresholdAmount:'' }减${ row.discountsAmount?row.discountsAmount:'' }；
                2.适用门店及业务：${ row.businessScope  == 0?'全部门店及业务':`指定门店及业务` }；
                3.适用范围：${ ["全部商品可用","指定商品可用","指定商品不可用"][row.activityScope] }；`
      }
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{

        let params = {
            ...formInline,
            userId:props.uuid,
            couponsStatus:status.value == -1?"":status.value
        }
 
        let result = await couponsReceiveDetails(params);
 
        totalPage.value = Number(result.total);
        tableData.value = result.records;
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const statusList = [
    {
        name: '全部',
        value: -1
    },
    {
        name: '待使用',
        value: 0
    },
    {
        name: '已使用',
        value: 1
    },
    {
        name: '已失效',
        value: 2
    }
]
const status = ref(-1);
const handleCommand = (name) => {
    console.log('name', name)
    status.value = name;
    seachTable.value.handlerSearch();
};
</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
          :showLine="false"
          :showBtn="false"
        >
        <template #status="{ row }">
            {{ row.couponsStatus }}
        </template>
        <template #statusHeader>
            <el-dropdown @command="handleCommand">
                <div class="status-div">
                    状态
                    <!-- <img src="@/assets/images/shaixuan3.png" alt=""> -->
                    <el-icon style="margin-left: 2px;font-size: 18px;font-weight: 900;"><Filter :style="{color: `${status === -1 ?'':'#409EFF'}`}" /></el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu >
                        <el-dropdown-item :class="`${status === item.value?'couponFlowSelectedItem' : ''}`" v-for="item in statusList" :key="item.value" :command="item.value">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
            </el-dropdown>
        </template>
        </SeachTable>
    </div>
</template>
<style>
.couponFlowSelectedItem{
    background-color: #409EFF !important;
    color: #fff !important;
}
</style>
<style lang="less" scoped>
.status-div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color:#000;
    position: relative;
    top:3px;
    img{
        width: 14px;
        height: 14px;
        cursor: pointer;
        margin-left:4px;
    }
}
:deep(.search-line){
    padding:0;
}
:deep(.search-table .table){
    padding:0;
}
.text-info{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #222222;
}

</style>